<template>
    <div class="echarts02" ref="echarts02"></div>
</template>
<script>
import http from '@/http';
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myecharts: null,
            option: {
                geo: {
                    type: "map",
                    map: 'china',
                    center: [104.80, 35.06],
                    zoom: 1.6,
                    itemStyle: {
                        areaColor: '#0c4c91',
                        borderColor: 'rgba(147,234,245,.5)',
                        borderWidth: 1
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: '#70EEFF',
                        }
                    }
                },
                tooltip: {},
                legend: {
                    textStyle: {
                        color: "#fff"
                    }
                },
                series: []
            }
        }
    },
    methods: {
        async getdata() {
            let ret = await http.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json');
            console.log(ret);
            echarts.registerMap("china", ret);

            let ret2 = await http.get("/map.json")
            console.log(ret2);
            ret2.forEach(item => {
                this.option.series.push({
                    type: "effectScatter",
                    name: item.name,
                    coordinateSystem: "geo",
                    data:item.children,
                })
            })
            this.myecharts = echarts.init(this.$refs["echarts02"]);
            this.myecharts.setOption(this.option);
        }
    },
    mounted() {
        this.getdata();
    }
}
</script>
<style scoped>
.echarts02 {
    width: 100%;
    height: 100%;
}
</style>